<template>
    <div style="
    border: 1px dashed #fff;
    padding: 0 10px;
    border-radius: 5px;
    margin-bottom: 10px;
">
        <a-row :gutter="24">
            <a-col :md="8" :sm="24" v-for="(item,index) in wasteTypeList" :key="index">
                <!--废物类型-->
                <div :style="{ borderBottom: '1px solid #E9E9E9', margin:'5px 0' }">
                    <!--
                       indeterminate：全选时用到，设置 indeterminate 状态，只负责样式控制,true表示不全显
                       checked：指定当前是否全部选中，true为全选中，反之
                    -->
                    <a-checkbox :indeterminate="item.indeterminate" :checked="item.checkAll"
                                @change="(e) => onCheckAllChange(e,item)">
                        {{item.wasteTypeName}}
                    </a-checkbox>
                </div>
                <!--
                    废物种类
                    checkedList：选中的废物种类
                    options：指定可选项，子集全部内容
                -->
                <a-checkbox-group v-model="item.checkedList" :options="item.plainOptions"
                                  @change="(e) => changeWasteType(e,item)"/>
            </a-col>
        </a-row>
        <br/>
    </div>
</template>

<script>
    import waste from '../../api/waste'

    export default {
        name: 'CheckboxWasteType',
        props:{
           companysId : {
               type : String,
               default : null
           }
        },
        data() {
            return {
                wasteTypeList: [], // 废物类型列表 (原始数据)
                checkWasteType : { // 选中的废物类型
                    list : [],
                    ids : []
                }
            }
        },
        created() {
            this.initData()
        },
        watch:{
            companysId(oldValue,newValue){
                if(!(oldValue == newValue)){
                    this.initData()
                }
            }
        },
        methods: {
            // 初始化废物列表
            async initData() {
                let params = {};
                if(this.companysId){
                    params['companysId'] = this.companysId;
                }
                // 根据处置单位id查询全部的废物类型
                let data = await waste.getWasteTypeListByCompanyId(params);
                let num = 0;
                // data.forEach((item, index) => {
                //     如果存在子集
                //     if(item['children'] && item['children'].length){
                //         item['indeterminate'] = true;
                //         item['checkAll'] = false;
                //         item['checkedList'] = [];
                //         item['plainOptions'] = [];
                //
                //         item['children'].forEach((val, i) => {
                //             val['checked'] = false;
                //             if(val.id == "1364859768315076610" || val.id == "1366581524675432449"){
                //                 item['checkedList'].push(val.id);
                //                 val['checked'] = true;
                //                 num++;
                //             }
                //             if(num == 0){
                //                 item['checkedList'].push(val.id);
                //                 val['checked'] = true;
                //             }
                //             let obj = {
                //                 value: val.id,
                //                 label: val.wasteTypeName,
                //                 checked: val['checked']
                //             };
                //             item['plainOptions'].push(obj)
                //         })
                //     }else{
                //         item['checked'] = true;
                //     }
                // });
                data.forEach((item, index) => {
                    // indeterminate = true 表示不全选
                    item['indeterminate'] = true;
                    item['checkAll'] = false;
                    item['checkedList'] = [];
                    item['plainOptions'] = [];
                    (item['children'] || []).forEach((val, i) => {
                        val['checked'] = false;
                        // （特殊固废中）默认选中感染性和损伤性
                        if(val.id == "1364859768315076610" || val.id == "1366581524675432449"){
                            item['checkedList'].push(val.id);
                            val['checked'] = true;
                            num++;
                        }
                        // 其他默认全选
                        if(num == 0){
                            item['checkedList'].push(val.id);
                            val['checked'] = true;
                        }
                        let obj = {
                            value: val.id,
                            label: val.wasteTypeName,
                            checked: val['checked']
                        };
                        item['plainOptions'].push(obj)
                    })
                });
                this.wasteTypeList = data;
                console.log('wasteTypeList',this.wasteTypeList)
                this.updateWasteCheckbox();
            },
            // 更新废物选择框内容
            updateWasteCheckbox(){
                let data = this.wasteTypeList;
                data.forEach((item, index) => {
                    item['checkedList'] = [];
                    item['plainOptions'] = [];
                    let child = (item['children'] || []);
                    child.forEach((val, i) => {
                        // 如果有选中的
                        if(val['checked']){
                            // 则添加到父集的checkedList中
                            item['checkedList'].push(val.id);
                            // 状态为选中
                            val['checked'] = true;
                        }
                        item['plainOptions'].push({
                            value: val.id,
                            label: val.wasteTypeName,
                            checked: val['checked']
                        })
                    });
                    // 子集全选
                    if(child.length === item['checkedList'].length){
                        // 设置父集全选
                        item['indeterminate'] = false;
                        item['checkAll'] = true;
                    }else{
                        // 父集不全选
                        item['indeterminate'] = true;
                        item['checkAll'] = false;
                    }
                });
                this.checkWasteType = { list : [], ids : [] };
                this.getCheck(data)
                this.handleChange();
            },

            // 获得选中的类型，封装在checkWasteType中，格式为{ list：[], ids : []},便于后期传给父组件
            getCheck(data){
                data.forEach((item, index) => {
                    if(item.checked){
                        this.checkWasteType['list'].push(item);
                        this.checkWasteType['ids'].push(item.id);
                    }
                    if((item['children'] || []).length){
                        this.getCheck(item['children']);
                    }
                });
            },
            // 点击全选
            onCheckAllChange(e,info){
                // 获取到checked 的值，判断是全选还是全不选,false为全不选，true为全选
                let check = e.target.checked;
                // 则改变子集的状态
                this.wasteTypeList.forEach((item, index) => {
                    if(info.id === item.id){
                        let child = (item['children'] || []);
                        child.forEach((val, i) => {
                            val['checked'] = check;
                        });
                    }
                });
                this.updateWasteCheckbox();
            },
            // 点击单个选择
            changeWasteType(checkedList,info) {
                this.wasteTypeList.forEach((item, index) => {
                    if(info.id === item.id){
                        let child = (item['children'] || []);
                        child.forEach((val, i) => {
                            // 默认没有选中
                            val['checked'] = false;
                            // 再与checkedList进行对比，如果存在，则状态改为选中
                            let id = checkedList.find((v) => v == val.id);
                            if(id){
                                val['checked'] = true;
                            }
                        });
                    }
                });
                this.updateWasteCheckbox();
            },

            handleChange: function(input, option) {
                // 选中的废物类型
                let info = this.checkWasteType;
                console.log('WasteType handleChange ==> ',info)
                this.$emit('change', info, this.wasteTypeList, option)
            }
        }
    }
</script>

<style scoped>

</style>
